import React, { useState, useEffect } from 'react';
import './ProfilePage.css';
import Edit from "../../../icons/Edit.svg"; // Импорт файла стилей
import LogoutButton from "../../LogoutButton/LogoutButton";



const ProfilePage = () => {

    Window.onload = () => {
        handleGet();
    }

    const [editing, setEditing] = useState(false);
    const [formData, setFormData] = useState({name: '', email: ''});
    const [formDataWEB, setFormDataWEB] = useState({login: '', password: ''});
    const [formDataISP, setFormDataISP] = useState({login: '', password: ''});

    const handleGet = async () => {
        const response = await fetch('http://localhost:3000/get-user-data', {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${sessionStorage.getItem('access_token')}`
            }
        });
        if (response.ok) {
            const data = await response.json();
            console.log(data);
            formDataISP.login = data.logins[0];
            formDataWEB.login = data.logins[1];
            formData.name = data.fullname;
        } else {
            console.log(await response.json());
        }
    }

    useEffect(() => {
        handleGet(); // Вызываем handleGet при монтировании компонента
    }, []);

    const toggleEditing = () => {
        setEditing(prevEditing => !prevEditing);
    };

    const handleChange = e => {
        const {name, value} = e.target;
        setFormData(prevFormData => ({
            ...prevFormData,
            [name]: value
        }));
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await fetch('http://localhost:3000/update-user', {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${sessionStorage.getItem('access_token')}` // Заменяем на ваш access token
                },
                body: JSON.stringify({
                    login: formData.login, // Предполагаем, что login есть в formData
                    password: formData.password, // Предполагаем, что password есть в formData
                    account_id: 1 // Предполагаем, что accountId есть в formData
                })
            });
            // ... остальной код обработки ответа и ошибок ...
        } catch (error) {
            // ... обработка ошибок ...
        }
    };

    const handleSubmitISP = async (e) => {
        e.preventDefault();

        console.log("govno1");

        try {
            const response = await fetch('http://localhost:3000/update-user', {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${sessionStorage.getItem('access_token')}` // Заменяем на ваш access token
                },
                body: JSON.stringify({
                    login: formData.login, // Предполагаем, что login есть в formData
                    password: formData.password, // Предполагаем, что password есть в formData
                    account_id: 2 // Предполагаем, что accountId есть в formData
                })
            });
            // ... остальной код обработки ответа и ошибок ...
        } catch (error) {
            // ... обработка ошибок ...
        }
    };

    const handleSubmitWEB = async (e) => {
        e.preventDefault();

        console.log(JSON.stringify({
            login: formDataWEB.login, // Предполагаем, что login есть в formData
            password: formDataWEB.password, // Предполагаем, что password есть в formData
            account_id: 3 // Предполагаем, что accountId есть в formData
        }));

        try {
            const response = await fetch('http://localhost:3000/update-user', {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${sessionStorage.getItem('access_token')}` // Заменяем на ваш access token
                },
                body: JSON.stringify({
                    login: formDataWEB.login, // Предполагаем, что login есть в formData
                    password: formDataWEB.password, // Предполагаем, что password есть в formData
                    account_id: 3 // Предполагаем, что accountId есть в formData
                })
            });
            // ... остальной код обработки ответа и ошибок ...
        } catch (error) {
            // ... обработка ошибок ...
        }
    };

    const handleChangeWEB = async (e) => {
        const {name, value} = e.target;
        setFormDataWEB((prevState) => {
            return {
                ...prevState,
                [name]: value
            };
        });
    }

    const handleChangeISP = async (e) => {
        const {name, value} = e.target;
        setFormDataISP((prevState) => {
            return {
                ...prevState,
                [name]: value
            };
        });
    }


    return (
        <div className="profile-page">

            <div className="grid-container">
                <div className="grid-item big-item">
                    <div className="user-info">
                        <div className="user-details">
                            <h2>Профиль</h2>
                            <div className="info-edit" onClick={toggleEditing}>
                                {editing ? 'Отмена' : 'Основная информация'}
                                <img src={Edit} alt="Info"/>
                            </div>
                            {editing ? (
                                <form className="edit-details" onSubmit={handleSubmit}>
                                    <input type="text" name="name" placeholder="Введите ФИО" value={formData.name}
                                           onChange={handleChange}/>
                                    <input type="email" name="email" placeholder="Введите Email" value={formData.email}
                                           onChange={handleChange}/>
                                    <button type="submit" onClick={() => {
                                        toggleEditing();
                                    }}>Сохранить
                                    </button>
                                </form>
                            ) : (
                                <>
                                    <div className="user-name">ФИО: {formData.name}</div>
                                    <div className="user-email">Email: {formData.email}</div>
                                </>
                            )}
                        </div>
                        <LogoutButton/>
                        <div className="profile-avatar"></div>
                    </div>
                </div>
                <div className="small-container">
                    <div className="grid-item small-item">

                        <form onSubmit={handleSubmitISP} autoComplete="off">
                            <h3>Гостевой доступ для ИСП</h3>
                            <div className="form-group">
                                <input
                                    type="text" name="e-m-a-i-l" autoComplete="h87h58g7h8hd"
                                    onChange={handleChangeISP}
                                    value={formDataISP.login} // Используем formDataISP.login как значение
                                    placeholder="Введите логин"
                                    required
                                />
                            </div>
                            <div className="form-group">
                                <input type="password" id="password" name="password"
                                       onChange={handleChangeISP}
                                       value={formDataISP.password} placeholder="Введите пароль"
                                       required
                                       />
                            </div>
                            <div className="form-group">
                                <input type="submit" value="Изменить пароль"/>
                            </div>
                        </form>

                    </div>
                    <div className="grid-item small-item">

                        <form onSubmit={handleSubmitWEB} autoComplete="off">
                            <h3>Гостевой доступ для ВЕБ</h3>
                            <div className="form-group">
                                <input
                                    type="text"
                                    id="login"
                                    name="login"
                                    onChange={handleChangeWEB}
                                    value={formDataWEB.login} // Используем formDataWEB.login как значение
                                    placeholder="Введите логин"
                                    required
                                />
                            </div>
                            <div className="form-group">
                                <input type="password" id="password" name="password"
                                       onChange={handleChangeWEB}
                                       value={formDataWEB.password} placeholder="Введите пароль"
                                       required/>
                            </div>
                            <div className="form-group">
                                <input type="submit" value="Изменить пароль"/>
                            </div>
                        </form>
                    </div>

                </div>
            </div>

        </div>
    );
}

export default ProfilePage;
